<template>
	<view class="userinfo-frame">
		<view class="userinfo-title">
			<view class="title-left">
				<view class="name">
					{{item.UserName}}
				</view>
				<view class="orgname">
					{{item.OrgID_Name}}
				</view>
			</view>
			<view class="title-right">
				{{_retSlgName(item.UserName)}}
			</view>
		</view>
		<view class="userinfo-list">
			<view class="list-item">
				<view class="item-title">企业/组织</view>
				<view class="item-body">{{item.DepartmentID_Name?item.DepartmentID_Name:'未填'}}</view>
			</view>
			<view class="list-item">
				<view class="item-title">工作</view>
				<view class="item-body">工作主页</view>
			</view>
			<view class="list-item">
				<view class="item-title">姓名</view>
				<view class="item-body">{{item.UserName}}</view>
			</view>
			<view class="list-item">
				<view class="item-title">电话</view>
				<view class="item-body">
					<view>{{item.Mobile?'+86-'+_splTelePhone(item.Mobile):'未填'}}</view>
					<image @click="onNav(item,1)" src="@/static/images/icons/icon-mobile.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="list-item">
				<view class="item-title">部门</view>
				<view class="item-body">{{item.OrgID_Name}}</view>
			</view>
		</view>
		<view class="userinfo-bottom">
			<view class="bottom-item" @click="onNav(item,0)">
				<view class="img">
					<image src="@/static/images/icons/icon-chat.png" mode="widthFix"></image>
				</view>
				<view class="tip">
					发消息
				</view>
			</view>
			<view class="bottom-item" @click="onNav(item,1)">
				<view class="img">
					<image src="@/static/images/icons/icon-tele.png" mode="widthFix"></image>
				</view>
				<view class="tip">
					打电话
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let pageApp = getApp();
	export default {
		data() {
			return {
				item: []
			}
		},
		onLoad: function(options) {
			this.getUserInfoById(options.id);
		},
		methods: {
			onNav(item, type) {
				if (type == 0) {
					if (item.ID != JSON.parse(uni.getStorageSync("userLoginData")).UserID) {
						uni.setStorageSync("fromUserName", item.UserName);
						// 返回列表页面
						let url = '../msg/MsgList?ConnUserId=' + item.ID;
						uni.navigateTo({
							url: url
						})
					} else {
						uni.showToast({
							icon: "none",
							title: "自己不能给自己发消息！"
						})
					}
				} else {
					if (item.Mobile) {
						// 打电话
						uni.makePhoneCall({
							phoneNumber: item.Mobile
						})
					}
				}
			},
			_splTelePhone(n) {
				let _arrT = n.split("");
				_arrT.splice(3, 4, "****");
				return _arrT.join("");
			},
			_retSlgName(v) {
				return (v) ? v.substr(0, 1) : "";
			},
			getUserInfoById(ID) {
				let apiData = {
					url: pageApp.globalData.url + "/UserInfo",
					data: {
						"ID": ID
					},
					success: (d) => {
						// console.log("数据", d.data.data.items);
						this.item = d.data.data;
					}
				}
				// 发送数据
				this.vjAjaxData(apiData);
			}
		}
	}
</script>

<style>
	page {
		background-color: #F1F5F6;
	}

	.userinfo-frame .userinfo-title {
		background-color: #ffffff;
		padding: 30rpx;
		margin: 20rpx 0;
		display: flex;
		justify-content: space-between;
	}

	.userinfo-title .title-left .name {
		font-size: 40rpx;
		font-weight: 700;
	}

	.userinfo-title .title-left .orgname {
		margin-top: 30rpx;
	}

	.userinfo-title .title-right {
		background-color: #4497e1;
		border-radius: 16rpx;
		color: #ffffff;
		margin-left: -130rpx;
		text-align: center;
		width: 120rpx;
		height: 120rpx;
		font-size: 50rpx;
		line-height: 120rpx;
	}

	.userinfo-list {
		background-color: #ffffff;
		padding: 0 30rpx 0 30rpx;
		margin: 20rpx 0;
	}

	.userinfo-list .list-item {
		padding: 26rpx 0;
		border-bottom: solid 2rpx #EBEBEB;
		line-height: 40rpx;
	}

	.list-item .item-body {
		display: flex;
		justify-content: space-between;
	}

	.item-body image {
		margin-right: 40rpx;
		margin-top: -16rpx;
		width: 36rpx;
	}

	.list-item:last-child {
		border-bottom: none;
	}

	.userinfo-list .list-item .item-title {
		font-size: 26rpx;
		color: #707070
	}

	.userinfo-bottom {
		display: flex;
		justify-content: space-around;
		position: fixed;
		bottom: 20rpx;
		left: 0;
		width: 100%;
	}

	.bottom-item {
		text-align: center;
		color: #4497e1
	}

	.bottom-item .img {
		background-color: #4497e1;
		width: 32rpx;
		height: 32rpx;
		line-height: 32rpx;
		padding: 20rpx;
		text-align: center;
		border-radius: 50%;
	}

	.bottom-item .img image {
		width: 100%;
	}

	.bottom-item .tip {
		font-size: 28rpx;
	}
</style>
